<!--  -->
<template>
  <div>
    <router-view />
    <van-tabbar route active-color='#7d7e80' v-model="active">
      <van-tabbar-item to='/' >
        <span>首页</span>
        <template #icon>
          <i class="iconfont icon-shouye"></i>
        </template>
      </van-tabbar-item>
      <van-tabbar-item to='/qa'>
        <span>问答</span>
        <template #icon>
          <i class="iconfont icon-wenda"></i>
        </template>
      </van-tabbar-item>
      <van-tabbar-item to='video'>
        <span>视频</span>
        <template #icon>
          <i class="iconfont icon-shipin"></i>
        </template>
      </van-tabbar-item>
      <van-tabbar-item to='my'>
        <span v-if="$store.state.user">我的</span>
        <span v-else>未登录</span>
        <template #icon>
          <i class="iconfont icon-wode"></i>
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  name: 'NavBar',
  data () {
    return {
      active: 0
    }
  }
}
</script>

<style  scoped>
i.iconfont {
    font-size: 40px;
}
</style>
